<template>
  <div class="quanxuan">
    <div>
      <input type="checkbox">
      <span>全选</span>
      <span>批量删除</span>
    </div>
 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[8, 16, 32, 40]"
     
      layout=" prev, pager, next, jumper"
      :total="100">
    </el-pagination>
    <div>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</div>
  </div>


</template>

<script>

export default {
data(){
return{
  currentPage:1,  //当前页,默认第一页
      

}
},
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.$emit('changePage',val)
      }
    },

}
</script>

<style lang='less' scoped>
.quanxuan{
  display: flex;
  justify-content:space-between;
  margin-top: 22px;
}

.el-pagination{
  margin-left: 200px;
}

</style>